<template>
    <div class="login_box">
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0rem" class="login_form">
        <div class="h1">Welcome To Login</div>
        <!-- 用户名 -->
        <el-form-item prop="ID" >
          <el-input v-model="loginForm.ID"  placeholder="Username" ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password"  type="password" placeholder="Password"></el-input>
        </el-form-item>
        <el-select v-model="Type" placeholder="ORDER" >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">Login</el-button>
          <el-button type="info" @click="resetLoginForm">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
export default {
  
  data() {
    return {
      //这是选择栏
      options: [{
          value: 'student',
          label:'学生'
        }, {
          value: 'teacher',
          label: '老师'
        }, {
          // 临时，因为外部引入的组件名没改
          value: 'admin',
          label: '管理员'
        }, ],
        
      // 这是登录表单的数据绑定对象
      loginForm: {
        ID: '',
        password: '',
      },
      // g9zdaf2UtO   wY3n5YZwJu   这是教师
      // Miguel Gray    TDihIsMjhu 这是管理员
      dataObject:{
      // 实时绑定，再根据不同type值传不同的表单
      },
      Type:'',
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        ID: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
  // 点击重置按钮，重置登录表单
  resetLoginForm() {
    this.$refs.loginFormRef.resetFields();
    this.Type = '';
  },
  updataloginFrom(){
    if(this.Type=='student'){
      this.dataObject = {
      studentId: this.loginForm.ID,
      password: this.loginForm.password
    };}
    if(this.Type=='teacher'){
      this.dataObject = {
      teacherId: this.loginForm.ID,
      password: this.loginForm.password
    };}
    if(this.Type=='admin'){
      this.dataObject = {
      adminId: this.loginForm.ID,
      password: this.loginForm.password
    };}
  },
  async login() {
    //后期删除 
    // 登录表单验证
    this.updataloginFrom();
    if (this.loginForm.ID==''|| this.loginForm.password == '') {
      this.$message({
        message: '请输入用户名和密码',
        type: 'warning'
      })
      return;
    }
    if (this.Type == '') {
      this.$message({
        message: '请选择角色类型',
        type: 'warning'
      })
      return;
    }
    //请求头
    const config = {
      headers: {
        'Content-Type': 'application/json', // Custom request header http://localhost:8080/
      }
    };
    try {
      const { data: res } = await this.$http.post(`api/user/${this.Type}/login`,JSON.stringify(this.dataObject),config);
      if (res.status !== false) {
        this.$message.success('登录成功');
        // 1. Save the token to sessionStorage after a successful login
        // 把token存入sessionStorage
        localStorage.setItem('token', res.token);
        localStorage.setItem('name', res.name);
        localStorage.setItem('ps',this.loginForm.password)
        localStorage.setItem('type', this.Type);
        localStorage.setItem('studentId', res.studentId || '');
        localStorage.setItem('teacherId', res.teacherId || '');
        localStorage.setItem('adminId', res.adminId || '');
        this.$router.push(`${this.Type}`);
        
      } else {
        this.$message.error('登录失败');
      }
    } catch (error) {
      // Handle request error
      console.error('Request Error:', error);
      this.$message.error('登录失败');
    }
  }
}
}

</script>
<style lang="less" scoped>
.h1{
  display: flex; /**/
  justify-content: center; /*水平居中*/
  align-items: Center; /*垂直居中*/
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .0625rem;
  margin-bottom: 1.25rem;
}
.login_box {
  width: 40vw;
  height: 100%;
  background-color: rgba(255,255,255,0.1);
  opacity: 0.8;
  border-radius: .625rem;
  backdrop-filter: blur(.3125rem);
  box-shadow: 0 1.5625rem 2.8125rem rgb(0,0,0,0.1);
  border: .0625rem solid rgb(255,255,255,0.5);
  border-right: .0625rem solid rgb(255,255,255,0.2);
  border-bottom: .0625rem solid rgb(255,255,255,0.2);  

  // position: absolute;
  // left: 50%;
  // top: 40%;
  // transform: translate(-50%, -50%);
}

.login_form {
   //position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1.25rem 1.25rem;
  //换单位
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
  
}

.el-button{
  background: rgb(255, 255, 255);
  border:none;
  outline: none;
  padding: .625rem 1.25rem;
  border-radius: 2.1875rem;
  border: .0625rem solid rgb(255, 255,255,0.2);
  border-right:  .0625rem solid rgb(255, 255,255,0.2);
  border-bottom:  .0625rem solid rgb(255, 255,255,0.2);
  font-size: 1rem;
  letter-spacing: .0625rem;
  color: #000000;
  box-shadow: 0 .3125rem .9375rem rgb(0,0,0,0.05);
}


.el-select /deep/ .el-input__inner {
  background: rgb(255, 255,255,0.2);
  border:none;
  outline: none;
  padding: .625rem 1.25rem;
  border-radius: 2.1875rem;
  border: .0625rem solid rgb(255, 255,255,0.2);
  border-right:  .0625rem solid rgb(255, 255,255,0.2);
  border-bottom:  .0625rem solid rgb(255, 255,255,0.2);
  font-size: 1rem;
  letter-spacing: .0625rem;
  color: #000000;
  box-shadow: 0 .3125rem .9375rem rgb(0,0,0,0.05);
  opacity: 0.5;
}

.el-input /deep/ .el-input__inner {
  background: rgb(255, 255,255,0.2);
  border:none;
  outline: none;
  padding: .625rem 1.25rem;
  border-radius: 2.1875rem;
  border: .0625rem solid rgb(255, 255,255,0.2);
  border-right:  .0625rem solid rgb(255, 255,255,0.2);
  border-bottom:  .0625rem solid rgb(255, 255,255,0.2);
  font-size: 1rem;
  letter-spacing: .0625rem;
  color: #000000;
  box-shadow: 0 .3125rem .9375rem rgb(0,0,0,0.05);
  width: 100%;
  opacity: 0.5;
}

.el-input /deep/ .el-input__prefix   {
  margin-right: .625rem
}
</style>